<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Insert title here</title>
<style type="text/css">

body{margin: 0 auto;}

#input_area{height: 80px;text-align: center; background-image: url("/pencil_factory/img/bgbg.jpg"); }
#machine1{float: left;}
#machine2{float:left;}
#machine3{clear: both;}


#db_area1{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }
#db_area2{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }
#db_area12{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }


.machine{background-color:#8C8C8C; padding-top:53px;padding-left:27px; width:525px; border: 1px solid #555555;height:345px; background-image: url("/pencil_factory/img/skin.gif"); background-repeat: no-repeat;}
#t1{width:250px; height:200px; border: 1px solid #B8B8B8; display: block; float: left;}
.b1{padding: 5px 0 0 10px; display:block; width:70px;height:15px; color:#0054FF;float: left; font-weight: bold; }
.b2{padding: 5px 0 0 50px; display:block; width:70px;height:15px; color:#2F9D27;float: left; font-weight: bold;font-size: 24px;  }


.d1{ float: right; width:250px; height:32px;border:1px solid #555555; background-color: #D9E5FF;float: left;}

.d2{font-size:13px;font-weight:bold;height:12px; display:block; background-color: #41FF3A;}


.d3{width:250px; height:65px; display:block; background-color: #FFFFDE;clear: both;}

.d4{width:200px; height:30px; display:block; border:2px solid #000000;}
#d5{width:50%; height:30px; display:block; background-color: #5587ED; }
#d51{width:50%; height:30px; display:block; background-color: #5587ED; }

.state_box{text-align:center; height:170px; margin-left:15px; width:40px; border:10px solid #555555; float: left; background-color:#EAEAEA; padding-top: 10px;}
.lb_01{ font-weight: bold;}
.state_box2{text-align:center; height:185px; margin-left:5px; width:160px; border:2px solid #5587ED; float: left; background-color:#EAEAEA; padding-top: 10px;}
.li_box{width: 20px; height: 20px; display: block; background-color: #000042;margin: 5px 0 5px 10px;}



.ttime{font-size: 11px;}


.name_ma{text-align: center; width:498px; font-weight: bold; font-size: 24px; margin-top: 8px;color:#F6F6F6;}

#tdbtn{text-align: center;}
#stopbtn{width:100px; height: 30px; margin-left: 26px;display:none;}


#reportbtn{width:100px; height: 60px;  margin-left: 20px; margin-top:5px; display:none;}
#reportbtn1{width:100px; height: 60px;  margin-left: 20px; margin-top:5px; display:none;}
#reportbtn2{width:100px; height: 60px;  margin-left: 20px; margin-top:5px; display:none;}


</style>

<link type="text/css" href="/pencil_factory/css/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="/pencil_factory/js/jquery.js"></script>
<script type="text/javascript" src="/pencil_factory/js/jquery-ui.js"></script>
<script type="text/javascript" src="/pencil_factory/js/holeindex.js"></script>

<script type="text/javascript">

var x2=0;
var flagState=0;
var endflag=0;
var steprun=0;//진행 상태를 말해준다.
var products=0;//완성품의 수 카운터

$(document).ready(function(){
//	alert("돼냐?");
	$("#reportbtn").on("click",function(){
			var urls="/pencil_factory/blackStick/reportPage.do";
			newWin(urls);
	});

		$("#sendBtn").on("click",function(){
			var oderNum=$("#orderNumS").val();
			pullServerStarter(oderNum);
		
		});
		

function pullServerStarter(oderNum){	
		$("#reportbtn").css({"display":"none"});
		if(x2>=1){
				alert("작동중입니다."+x2);
		}
		if(x2==0){
			alert("작동합니다."+x2);
			x2=1;
			$.ajax({
					"url":"/pencil_factory/blackStick/MixMachine.do",
					"type":"post",
					"data":{"orderNumS":oderNum},
					"dataType":"json",
					"beforeSend":function(){		
					},
					"success":function(data){//변수 data의 type- javascript 객첵}		
					},"error":function(xhr, status, msg){
					//	alert("오류 발생 :"+xhr.readyState+","+status+","+msg);
				}
			});
			products=0;
			state_machine(1);
			pullServer();
			$("#db_area1").empty();
			$("#db_area1").append("<b>작업을 시작합니다.</b><br>");	
		}
}
		
		////////////////
		
	$("#testBtn").on("click",function(){
		alert("퍼센트 테스트:"+valuePersent($("#test").val()));
	});	
	state_machine(flagState);
});


function pullServer(){
	
	//alert("천재");
	$.ajax({
		"url":"/pencil_factory/blackStick/getmoniter.do",
		"type":"post",
		"data":{"orderNumS":$("#orderNumS").val()},
		"dataType":"json",
		"beforeSend":function(){
				
				$("#oderNum").html(""+$("#orderNumS").val()+"");
				
				
			},
			"success":function(data){
			
						if(products == 0){
							$("#sTime11").html("<font size='1'>"+data.startTime+"</font>");
							$("#eTime11").html("<font size='1'>"+data.endTime+"</font>");
						
						}
					steprun=data.runstep;
					products=data.normal;
					$("#d5, #sTime, #eTime, #product").empty();
					$("#d5").html("<b>"+data.runstep+"</b>");
					$("#d5").css({"width":""+data.runstep+"%"});
					steprun=data.runstep;
					/////////////////////
					$("#tg1").html("<b>"+(data.clay-60)+"</b>");
					$("#tg2").html("<b>"+(data.blackRead-60)+"</b>");
					$("#tg3").html("<b>"+data.water+"</b>");
					$("#tg4").html("<b>"+data.machineLife+"</b>");
				//	alert(data.state);
				if(data.state == '불량'){
					$("#db_area1").prepend("<b>불량품이 발생했습니다.-불량품량:"+data.abnormal+"</b><br>");
					flagState=2;
					//alert(flagState);
				}

				if(data.state == '정상'){
					$("#db_area1").prepend("<font size='3'>정상품:"+data.normal+", 상태:"+data.state+", 시간:"+data.startTime+"</font><br>");
					flagState=1;
					//	alert(flagState);
					}
					$("#product").html("<b>"+data.normal+"</b>");

			},"error":function(xhr, status, msg){
				alert("오류 발생 :"+xhr.readyState+","+status+","+msg);
		}	

			
	});
	state_machine(flagState);
	
	
/////////////////////////////////////////////////////////////	
	endflag=endflag+1;//끝을 위한 플러그 첫번째 값이 쓰레기 값이라 처리에 어려움이 있어 넣었다.
	if(endflag > 2){
		if($("#orderNumS").val() == products){
			
			//if(steprun >= 100){
			//alert("완료");
		//	$("#db_area").prepend("<b>작업이 완료되었습니다.</b><br>");
				x2=0;
				endflag=1;
				steprun=0;
				products=0;
				flagState=0;
				state_machine(flagState);
				
				
				//var start=${param.start };
				//pullServer2stater();-------------------------------------------<2호기 시작
			//	var urls="/pencil_factory/holeindex.jsp?start="+$("#orderNumS").val();
			//	newWin(urls);
				
				$("#reportbtn").css({"display":"block"});
				//////////////////////////////끝나는 부분
				//alert("종료한다.");
					$("#db_area1").prepend("<b>작업이 완료되었습니다.</b><br>");
					
					
					
					
					
				//$("#db_area").children(1).removeChild();
				//$("#db_area").lastChild().removeChild();
			
			return false();
		}
		
	}	
///////////////////////////////////////////////////////////////////	
	if(endflag >= 1){
		setTimeout("pullServer()",1300);
		
	}
}



function state_machine(flagState){
	if(flagState==0){
		$("#st_box3").css({"background-color":"#ff0000"});	
		$("#st_box1, #st_box2").css({"background-color":"#000042"});	
		
	}
	if(flagState == 1){
		$("#st_box1").css({"background-color":"#ABF200"});	
		$("#st_box2, #st_box3").css({"background-color":"#000042"});	
	}
	if(flagState == 2){
		$("#st_box2").css({"background-color":"#FFFF48"});	
		$("#st_box1, #st_box3").css({"background-color":" #000042"});	
	}
}


function test1(a){
	alert("test"+a);
}
	/////////////////////
		//받아 오는 값을 퍼센트로 처리 
		var a1=0;
		function valuePersent(met){
			if(a1==0){
				a1=met;
				alert(a1);
			}
			if(a1>0){
			var	b1=a1/100;
			return persent=met/b1;
			}
		}		

		
		//윈도우 팝업 창띄우기
		
	
	function newWin(urls) {
			window.open(url=urls, width='800');
	}
		
	//	var	url1="http://www.naver.com";
	//	function newWin(url1,800,900) {
	//	window.open(url='url','new_win','width='+w+',height='+h+',toolbars=no,menubars=no,scrollbars=auto');
	//	}

		
</script>

</head>
<body>


<div id="input_area">
								<h1>연 필 공 장 4조</h1>
								<input type="text" id="orderNumS" name="orderNumS"><input type="button" id="sendBtn" value="전송">
</div>
							<!--    연필심기계   연필심기계  연필심기계  연필심기계  연필심기계  연필심기계   -->
							
<div  id="machine1" class="machine">
								<div id="t1">
							
										<div class="d1"><span class="b1">점토량</span><span id="tg1" class="b2" >100</span></div>
										<div class="d1"><span class="b1">흑연</span><span id="tg2" class="b2" >100</span></div>
										<div class="d1"><span class="b1">물</span><span id="tg3"  class="b2" >100</span></div>
										<div class="d1"><span class="b1">기계피로</span><span  id="tg4" class="b2" >100</span></div>
										
										<div class="d3">
											<span class="b1"><b>진행률</b></span><br>	
											<span class="d4"><span id="d5" >50</span></span>
										</div>	
								</div>
								<div class="state_box">
									<div><em class="lb_01">작동</em><span id="st_box1" class="li_box"></span></div>
									<div><em class="lb_01">알림</em><span id="st_box2" class="li_box"></span></div>
									<div><em class="lb_01">종료</em><span id="st_box3" class="li_box"></span></div>
								</div>
								<div class="state_box2">
									<table>
										<tr>
											<td width='90px' class="ttime">시작시간:</td><td id="sTime11">-</td>
										</tr>
										<tr>
											<td class="ttime">소요시간:</td><td id="eTime11" >-</td>
										</tr>
										<tr>
											<td class="ttime">주문량:</td><td id="oderNum">-</td>
										</tr>
										<tr>
											<td class="ttime">생산량:</td><td id="product">-</td>
										</tr>
										<tr>
											<td colspan="2" id="tdbtn">
												<center>
													<input type="button" id="stopbtn" value="정지"><br>
													<input type="button" id="reportbtn" value="보고서">
												</center>
											</td>
										</tr>
									</table>
								</div>
								
								<div id="db_area1">
								</div>
								
									<div class="name_ma">연필심기계</div>
</div>
<!--    연필심기계   연필심기계  연필심기계  연필심기계  연필심기계  연필심기계   -->

<div class="machine" id="machine2">
	<div id="t1">

		<div class="d1"><span class="b1">나무판</span><span id="tg11" class="b2" >0</span></div>
		<div class="d1"><span class="b1">나무판</span><span id="tg21" class="b2" >0</span></div>
	<!-- 	<div class="d1"><span class="b1">접착제</span><span id="tg31"  class="b2" >100</span></div> -->
		<div class="d1"><span class="b1">기계피로</span><span  id="tg41" class="b2" >0</span></div>
		
		<div class="d3">
			<span class="b1"><b>진행률</b></span><br>
			
			<span class="d4"><span id="d51" >0</span></span>
		</div>	
	</div>
	<div class="state_box">
		<div><em class="lb_01">작동</em><span id="st_box11" class="li_box"></span></div>
		<div><em class="lb_01">알림</em><span id="st_box21" class="li_box"></span></div>
		<div><em class="lb_01">종료</em><span id="st_box31" class="li_box"></span></div>
	</div>
	<div class="state_box2">
		<table>
			<tr>
				<td width='90px' class="ttime">시작시간:</td><td id="sTime11">-</td>
			</tr>
			<tr>
				<td class="ttime">완료시간:</td><td id="eTime11" >-</td>
			</tr>
			<tr>
				<td class="ttime">주문량:</td><td id="oderNum11">-</td>
			</tr>
			
			<tr>
				<td class="ttime">생산량:</td><td id="product11">-</td>
			</tr>
			<tr>
				<td colspan="2" id="tdbtn">
					<center>
						<input type="button" id="reportbtn1" value="보고서">
					</center>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="db_area2">
	</div>
	<div class="name_ma">☆나무홈파기머신☆</div>
</div>
<div = id="db_holeNamu">

</div>

<div id="dialog_layer" style="display: none;" title="보고서"> 

	
	<div id="list">
		<span id="firstBs"></span>&nbsp;&nbsp;&nbsp;
		<span id="firstNp"></span>
	</div>


</div>

<!--   ☆나무홈파기머신☆  ☆나무홈파기머신☆  ☆나무홈파기머신☆     -->


<!--    ☆연필 깍기 머신☆ ☆연필 깍기 머신☆ ☆연필 깍기 머신☆ ☆연필 깍기 머신☆ -->

<div class="machine" id="machine3">
	<div id="t1">

		<div class="d1"><span class="b1">연필나무판</span><span id="tg12" class="b2" >100</span></div>
		<div class="d1"><span class="b1">페인트</span><span id="tg22"  class="b2" >100</span></div>
		<div class="d1"><span class="b1">기계피로</span><span  id="tg32" class="b2" >100</span></div>
		
		<div class="d3">
			<span class="b1"><b>진행률</b></span><br>
			
			<span class="d4"><span id="d52" >50</span></span>
		</div>	
	</div>
	<div class="state_box">
		<div><em class="lb_01">작동</em><span id="st_box12" class="li_box"></span></div>
		<div><em class="lb_01">알림</em><span id="st_box22" class="li_box"></span></div>
		<div><em class="lb_01">종료</em><span id="st_box32" class="li_box"></span></div>
	</div>
	<div class="state_box2">
		<table>
			<tr>
				<td width='90px' class="ttime">시작시간:</td><td id="sTime2">-</td>
			</tr>
			<tr>
				<td class="ttime">완료시간:</td><td id="eTime2" >-</td>
			</tr>
			<tr>
				<td class="ttime">주문량:</td><td id="oderNum2">-</td>
			</tr>
			
			<tr>
				<td class="ttime">생산량:</td><td id="product2">-</td>
			</tr>
			<tr>
				<td colspan="2" id="tdbtn">
					<center>
						<input type="button" id="reportbtn2" value="보고서">
					</center>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="db_area2">
	</div>
	<div class="name_ma">☆연필 생성 머신☆</div>
</div>
 
<!--    ☆연필 깍기 머신☆ ☆연필 깍기 머신☆ ☆연필 깍기 머신☆   -->
</body>
</html>